import React, { Component } from 'react';
import './headerIssue.scss'
class issueHeader extends Component {
  state = {
    title: '',
    content: '',
    arr:[]
  }
  // 评论人改变
  titleChange = (e) => {
    this.setState({
      title: e.target.value
    })
  }
  // 内容改变
  contentChange = (e) => {
    this.setState({
      content: e.target.value
    })
  }
  // 发布
  publish = () => {
    const { title, content } = this.state
    if (title === '') {
      alert('请输入评论人')
      return
    } else if (content === '') {
      alert('请输入评论内容')
      return
    } else {
      let newArr=[...this.state.arr]
      newArr.push({ title, content })
      this.setState({
        title: '',
        content: '',
        arr:newArr
      },function(){
        this.props.release(this.state.arr)
      })
    }
  }
  render () {
    return (
      <>
        <p>
          <input type="text" value={this.state.title} onChange={this.titleChange} placeholder='请输入评论人' className='title' />
        </p>
        <p>
          <textarea placeholder='请输入评论内容' value={this.state.content} onChange={this.contentChange} className='content'></textarea>
        </p>
        <button className='but' onClick={this.publish}>发表评论</button></>
    )
  }
}

export default issueHeader;